<template>
  <div class="common-problem">
    <div class="problem">
      <div class="problem-menu">
        <div class="problem-title">常见问题</div>
        <div class="problem-list">
          <el-tree
            ref="tree"
            :data="problemItems"
            :props="defaultProps"
            node-key="id"
            :default-expanded-keys="expandedKey"
            :current-node-key="currentKey"
            @node-click="handleNodeClick"
          ></el-tree>
        </div>
      </div>
      <div class="problem-content">
         <ProblemContent :problemContent="problemContent"></ProblemContent>
      </div>
    </div>
  </div>
</template>

<script>
import ProblemContent from '../../components/problemContent';
export default {
  components: {
    ProblemContent
  },
  data () {
    return {
      problemItems: [
        {
          id: 1,
          label: '入住流程和账号管理',
          children: [
            {
              id: 11,
              parentLabel: '入住流程和账号管理',
              label: '开发者团队创建和认证',
              content: [
                {
                  tit: '如何做有赞云认证？',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: '个人认证和企业认证的区别',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: '微商城已经认证了主体为什么创建应用还要再次认证',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: '开发者实名认证信息资料填写规范',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: '开发者企业认证无法提供法人手持证件照怎么办？',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: '开发者入驻个人或企业认证审核时间是多久？',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: '团队成员管理提示“找不到用户信息”',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: '如何加入其他人团队',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: '查看我的团队是用什么机构信息进行认证的',
                  timer: '2022-04-02 14:29:26'
                }
              ]
            },
            {
              id: 12,
              parentLabel: '入住流程和账号管理',
              label: '应用创建和审核',
              content: [
                {
                  tit: '无容器自用型应用创建相关问题',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: '创建自用型无容器应用必须要选择本账号下的店铺吗？',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: '应用审核时间是多久？',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: '创建有赞云应用收费吗？',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: '创建自用型应用时，提供不了版权信息，如何处理？',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: '应用环境介绍',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: '创建应用能用测试店铺创建吗？',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: '我该申请哪种类型的应用呢',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: '开发者是否可以快捷修改有赞云的应用名称？',
                  timer: '2022-04-02 14:29:26'
                }
              ]
            },
            {
              id: 13,
              parentLabel: '入住流程和账号管理',
              label: '应用授权',
              content: [
                {
                  tit: '待授权如何授权？[适用自用型应用]',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: '授权时无法选择店铺？',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: '如何查看店铺已授权的有赞云应用',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: '如何配置分店自动授权自用型容器？',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: '在开发者控制台授权管理页面中，店铺的授权状态是“关闭授权”，这是为什么？',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: '如何解除授权？（包含自用型应用和工具型应用）',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: '应用授权会过期吗',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: '总部下有上百家网店、门店，如何授权',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: '我有多个独立的店铺，需要调用接口，该怎么做？',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: '店铺到期，应用的授权关系没有到期，还能继续使用应用吗？',
                  timer: '2022-04-02 14:29:26'
                }
              ]
            },
            {
              id: 14,
              parentLabel: '入住流程和账号管理',
              label: '开发者账号变更',
              content: [
                {
                  tit: '如何更换团队负责人',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: '练习不到负责人变更方案',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: '如何注销有赞云账号',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: '有赞云开发者账号修改流程',
                  timer: '2022-04-02 14:29:26'
                }
              ]
            },
            {
              id: 15,
              parentLabel: '入住流程和账号管理',
              label: '多店铺授权',
              content: [
                {
                  tit: '上传凭证，上传新增授权店铺的认证主体截图信息',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: '多店铺授权申请时找不到我想要授权的店铺怎么办',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: '如何查看多店铺授权被驳回的原因',
                  timer: '2022-04-02 14:29:26'
                }
              ]
            }
          ]
        },
        {
          id: 2,
          label: '应用开发',
          children: [
            {
              id: 21,
              parentLabel: '应用开发',
              label: '获取token',
              content: [
                {
                  tit: '上传凭证，上传新增授权店铺的认证主体截图信息',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: '多店铺授权申请时找不到我想要授权的店铺怎么办',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: '如何查看多店铺授权被驳回的原因',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: 'appKey,appSecret如何获取？',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: '有容器应用与无容器应用同时绑定同一店铺，两个应用间是否存在token冲突？',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: 'token过期怎么办',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: '麻烦提供一个测试的client_id和client_secret',
                  timer: '2022-04-02 14:29:26'
                }
              ]
            },
            {
              id: 22,
              parentLabel: '应用开发',
              label: '获取code',
              content: [
                {
                  tit: '如何获取code',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: '为什么我的应用绑定授权的测试店铺是已授权状态且已设置回调地址，但点击“获取code”，接收不到？',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: '工具型应用授权对接，没有收到订购的code如何处理？',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: 'code回调地址示例',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: '工具型应用订购后只有 code，怎么跟 kdt_id 关联起来？',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: '为什么我会获取到多次code',
                  timer: '2022-04-02 14:29:26'
                }
              ]
            },
            {
              id: 23,
              parentLabel: '应用开发',
              label: '测试店铺',
              content: [
                {
                  tit: '测试店铺如何申请某些功能',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: '今日调用已经超额，每日调用额度5000次',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: '为什么云测试店铺有赞连锁L-总部店铺没办法创建测试用的网店和门店？',
                  timer: '2022-04-02 14:29:26'
                }
              ]
            },
            {
              id: 24,
              parentLabel: '应用开发',
              label: '数据加密',
              content: [
                {
                  tit: '上传凭证，上传新增授权店铺的认证主体截图信息',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: '多店铺授权申请时找不到我想要授权的店铺怎么办',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: '如何查看多店铺授权被驳回的原因',
                  timer: '2022-04-02 14:29:26'
                }
              ]
            }
          ]
        },
        {
          id: 3,
          label: '接口权限和计费',
          children: [
            {
              id: 31,
              parentLabel: '接口权限和计费',
              label: '能力包',
              content: [
                {
                  tit: '能力包申请指南',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: '如何查看已获得权限？如何申请类目能力包？',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: '没有操作权限?如何申请有赞云API接口权限？',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: '类目权限调整涉及能力包',
                  timer: '2022-04-02 14:29:26'
                }
              ]
            },
            {
              id: 32,
              parentLabel: '接口权限和计费',
              label: '资源计费',
              content: [
                {
                  tit: '一个应用同时有套餐包、加油包是如何消耗计费的？',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: '账单的调用次数怎么统计？',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: '账单可以使用API接口查询吗？',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: '调用失败会收费吗？',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: '去哪里查看账单？',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: '调用失败会收费吗？',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: '店铺新增授权给自用型应用，为什么没有发放套餐包？',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: '如何充值？',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: 'API调用的账单如何获取？',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: '关于API调用费用常见问题汇总',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: '收费API和免费API在哪看？',
                  timer: '2022-04-02 14:29:26'
                }
              ]
            }
          ]
        },
        {
          id: 4,
          label: '常见错误代码',
          children: [
            {
              id: 41,
              parentLabel: '常见错误代码',
              label: '常见错误代码',
              content: [
                {
                  tit: 'code:118706807;message:转账产品权限未开通',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: '调用接口返回{"gw_err_resp":{"err_msg":"没有操做权限","err_code":4204}}',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: 'err_code:4203,err_msg:Token 不存在',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: 'code:1004,message:授权关系已过期',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: 'err_code: 4203,err_msg: 请求凭证不存在',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: 'code:1004,message:授权关系已过期',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: 'code: 1005, message: 非法授权码',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: 'code: 1103, message: 授权应用不匹配',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: '请求接口报错"请求太频繁"怎么处理？',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: '为何clientid存在，但获取token返回“clientId不存在或流量超过峰值受限”的错误？',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: 'code-250700006,message-accessToken不适用于此userToken，请检查accessToken',
                  timer: '2022-04-02 14:29:26'
                }
              ]
            }
          ]
        },
        {
          id: 5,
          label: '消息推送',
          children: [
            {
              id: 51,
              parentLabel: '消息推送',
              label: '消息推送相关',
              content: [
                {
                  tit: '控制台找不到需要订阅的消息',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: '消息推送一直处在推送中',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: '测试店铺的消息推送回调如何配置？',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: '消息收不到？',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: '正式店铺和云测试店铺的消息如何区分？',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: ' 为什么会出现推送的消息中sendCount参数时而出现时而不出现情况？',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: '积分消息中如何判断是加积分还是减积分呢？',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: '有赞云应用支持配置多个消息推送的接收地址吗？',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: 'SCRM_CUSTOMER_EVENT 消息推送没有is_member字段',
                  timer: '2022-04-02 14:29:26'
                },
                {
                  tit: '优惠券码事件中，收回优惠券（CARD_BACK）和买家退回优惠券（CARD_REVERT）的差别是什么？',
                  timer: '2022-04-02 14:29:26'
                }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      problemContent: {
        titleA: '常见问题',
        titleB: '入住流程和账号管理',
        titleC: '开发者团队创建和认证',
        content: [
          {
            tit: '如何做有赞云认证？',
            timer: '2022-04-02 14:29:26'
          },
          {
            tit: '个人认证和企业认证的区别',
            timer: '2022-04-02 14:29:26'
          },
          {
            tit: '微商城已经认证了主体为什么创建应用还要再次认证',
            timer: '2022-04-02 14:29:26'
          },
          {
            tit: '开发者实名认证信息资料填写规范',
            timer: '2022-04-02 14:29:26'
          },
          {
            tit: '开发者企业认证无法提供法人手持证件照怎么办？',
            timer: '2022-04-02 14:29:26'
          },
          {
            tit: '开发者入驻个人或企业认证审核时间是多久？',
            timer: '2022-04-02 14:29:26'
          },
          {
            tit: '团队成员管理提示“找不到用户信息”',
            timer: '2022-04-02 14:29:26'
          },
          {
            tit: '如何加入其他人团队',
            timer: '2022-04-02 14:29:26'
          },
          {
            tit: '查看我的团队是用什么机构信息进行认证的',
            timer: '2022-04-02 14:29:26'
          }
        ]
      },
      currentKey: '',
      expandedKey: [1]
    };
  },
  mounted () {
    this.$refs.tree.setCurrentKey('11');
  },
  methods: {
    handleNodeClick (data, node) {
      if (data.children) {
        this.$refs.tree.setCurrentKey(this.currentKey);
      } else {
        this.currentKey = data.id;
        this.problemContent.titleB = data.parentLabel;
        this.problemContent.titleC = data.label;
        this.problemContent.content = data.content;
      }
    }
  }
};
</script>

<style lang="less" scoped>
/deep/.el-tree-node__children .is-current .el-tree-node__label {
          color: #155bd4;
          }
.common-problem {
  height: 947px;
  .problem {
    display: flex;
    width: 1200px;
    margin: auto;
    .problem-menu {
      width: 190px;
      padding-right: 22px;
      padding-bottom: 48px;
      margin-top: 24px;
      border-right: 1px solid #ebedf0;
      .problem-title {
        font-weight: 700;
        font-size: 16px;
        height: 46px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #ebedf0;
      }
      .problem-list {
        box-sizing: border-box;
        height: 100%;
        margin-top: 20px;
        .el-tree {
          color: #333;
          font-size: 14px;
          /deep/.el-tree-node__label {
            width: 100%;
            height: 40px;
            line-height: 40px;
            text-align: left;
          }
          /deep/.el-tree-node__content {
            height: 40px;
          }
          /deep/.el-tree-node__content:hover {
            color: #155bd4;
            background-color: #e6effc;
          }
          /deep/.el-tree-node__content > .el-tree-node__expand-icon {
            position: absolute;
            right: 2%;
          }
          /deep/.el-tree-node:focus > .el-tree-node__content {
            color: #155bd4;
          }
          /deep/.el-icon-caret-right:before {
            content:"\e6df"
          }
          /deep/.el-tree-node__expand-icon.expanded {
            transform: rotate(-180deg);
          }
        }
      }
    }
  }
  .problem-content {
    display: flex;
    flex: 1;
    padding: 24px 0 48px 40px;
  }
}
</style>
<style scoped>

</style>
